<template>
	<s-layout navbar="inner1"  :bgStyle="{ color: 'transparent' }">
		<view class="content">
			<assNavbar title="电商" :background="{
				img:sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png'),
				BGcolor:'transparent'
			}"/>
			<image class="bgTop" :src="sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png')" mode="widthFix" />
			<su-tabs :list="tabMaps" lineColor="#003288" :activeStyle="{color:'#003288',fontSize:'32rpx'}"
			:inactiveStyle="{fontSize:'32rpx'}"
				lineHeight="3" lineWidth="28" :scrollable="false" @change="onTabsChange" 
				:current="state.current">
			</su-tabs>
			<scroll-view class="scroll-view" scroll-y :style="{height:pageHeight*2+'rpx'}">
				<swiper   :style="{height:(pageHeight+44)*2+'rpx'}" @change="swiperChange" :current="state.current" >
					<swiper-item class="swiper-item" style="height:max-content!important" v-for="(item,index) in state.data.pay_config" :key="index">
						<image  class="cardBox-bg" :src="sheep.$url.cdn(item.image.split(',')[0])" mode="widthFix" />
									<!-- <view class="info-time" :style="`color:${item?.timeColor}`" >
										2025.06.01到期
										<view class="repair">
											2025.01.01 可补差价升级
										</view>
									</view> -->
						
						<view class="ss-p-b-40">
							<image class="infoCard" :src="sheep.$url.cdn(item.image.split(',')[1])" mode="widthFix" />
						</view>	
									<!-- <image class="infoCard" :src="sheep.$url.cdn(list[state.current].pic2)" mode="widthFix" /> -->
						
					</swiper-item>
				</swiper>
			</scroll-view>
			
			
			
			<su-fixed bottom>
				<view class="ss-p-x-20 ss-p-b-60 ss-flex justify-between">
					<!-- 需要支付 -->
					<template v-if="state.data.need_pay">
						<button class="ss-reset-button btn ss-m-t-40" @tap='toPay()'>
							￥{{state.data.pay_config[state.current].price}}&nbsp;&nbsp;立即入驻
						</button>
					</template>
					<template v-else>
						<button @tap="goApply" :disabled="state.flag===1" class="ss-reset-button btn ss-m-t-40" >
							{{state.flag===false?'立即入驻':
							state.flag===0?'待审核':
							state.flag===2?'已拒绝':'已入驻'}}
						</button>
					</template>
					
				</view>
			</su-fixed>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import assNavbar from "@/components/ass-navbar.vue"
	import {ref ,reactive, computed, onBeforeMount,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import userApi from "@/sheep/api/user.js"
	
	const sys_navBar = sheep.$platform.navbar;//标题栏高度
 	const template = computed(() => sheep.$store('app').template?.home);
	const state = reactive({
		index:0,
		current:0,
		data:{},
		flag:false
	})
	let pageHeight = computed(()=>(sheep.$platform.device.safeArea.height  - 44 -44))
	const tabMaps =ref([
	 
	  {
	    name: '基础套餐',
	    value: 0,
	  },
	  {
	    name: 'VIP套餐',
	    value: 1,
	  }
	]) ;
	const list=[
		{price:199,pic1:'/storage/KP/20250318/a040692ef80c441ffb288ea94ea766ba.png',pic2:'/storage/KP/20250318/e0eeb64d61e008202ca092df8b0f445e.png',shop_type:2,level:0},
		{price:4980,pic1:'/storage/KP/20250318/048621788edc5aaf145956b6a0c6bb62.png',pic2:'/storage/KP/20250318/e0eeb64d61e008202ca092df8b0f445e.png',shop_type:2,level:1},
		// {price:6980,pic1:'/storage/giveaway/20250314/16089ee48082efa93b3917efa01a26df.png',pic2:'/storage/giveaway/20250314/8fffa080f78a771fd7c5accaad260c9f.png'},
		// {price:19800,pic1:'/storage/giveaway/20250314/176b204823f3adc26f0ebec434d3e1c7.png',pic2:'/storage/giveaway/20250314/c57446839c0c3832a8560c25f815bcc8.png'},
	
	]
	// 切换选项卡
	function onTabsChange(e) {
	  state.current = e.index;
	}
	

	
	
	function swiperChange(e){
		state.current = e.detail.current
	}
	
	async function toPay(){
		
			const {data,error}=await sheep.$api.commission.giveaway.prepay({
				serve:1,
				price:state.data.pay_config[state.current].price,
				tc_id:state.current+1,//基础套餐 1 vip套餐 2
			})
			if(error==0){
				uni.requestPayment({
				  provider: 'wxpay',
				  ...data,
				  success: (res) => {
					  uni.showToast({
					  	title:'支付成功',
					  	icon:'none',
					  	duration:2000
					  })
					  setTimeout(()=>{
						  goApply()
					  },2000)
				  },
				  fail: (err) => {
				    if (err.errMsg === 'requestPayment:fail cancel') {
				      sheep.$helper.toast('支付已手动取消');
				    } else {
						uni.showToast({
							title:'支付失败，请重试',
							icon:'none',
							duration:2000
						})
				    }
				  },
				});
			}
		
	}
	
	function goApply(){
		if(state.flag===false){
			sheep.$router.go('/pages/commission/merchant/apply',{
				// level:level,
				type:0,//0自己入驻  1代理帮忙入驻
				shopType:2,//3鲸喜生活  1电商商家  2本地生活
			});
		}else{
			sheep.$router.go('/pages/commission/merchant/result',{serve:1})
		}
		
	}
	
	
	
	async function getStatus(){//检查是否已经入驻
		const res = await sheep.$api.commission.merchant.applyList({
			serve:1,
			type:1,//1入驻  2进件
			mobile:sheep.$store('user').userInfo.mobile
		})
		if(res.data.length==0){
			state.flag=false
		}else{
			state.flag=res.data[0].status
		}
		
	}
	
	async function getList(){
		const res = await sheep.$api.commission.giveaway.vipList({
			serve:1//3鲸喜生活  1电商商家  2本地生活
		})
		state.data=res.data
		tabMaps.value=res.data.pay_config.map((item,index)=>({name:item.desc,value:index}))
		if(state.data.need_pay===false){//如果已经付过钱 检查是否已经入驻
			getStatus()
		}
	}
	onLoad((options)=>{
		
	})
	onShow(()=>{
		getList()
	})
	
</script>

<style lang="scss" scoped>
	.bgTop{
		width:100%;
		height:331rpx;
		margin-top:v-bind('-sys_navBar+"px"');
		margin-bottom:-200rpx
	}
	:deep().u-tabs{
		background:transparent!important;
		border:none!important;
		margin-top:-40rpx!important;
		margin-bottom:10rpx;
		
	}
	:deep()uni-swiper{
		height:max-content!important;
	}
	.content{
		.btn{
			width: 702rpx;
			height: 80rpx;
			background: #003288;
			border-radius: 49rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.btn[disabled]{
			background:rgba(115, 121, 136, 0.4)!important;
		}
		.swiper-item{
				// width:700rpx!important;
				box-sizing: border-box;
				text-align:center;
				.cardBox-bg{
					width: 702rpx;
					margin:0 auto;
				}	
		}
		.infoCard{
			width: 702rpx;
			margin:20rpx auto 0 auto;
		}
	}
</style>